<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>EMR - Dashboard</title>

		<!-- Favicon -->
		<link rel="shortcut icon" type="image/x-icon" href="__INDEX__/img/favicon.png">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="__INDEX__/css/bootstrap.min.css">

		<!-- Fontawesome CSS --> 
		<link rel="stylesheet" href="__INDEX__/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="__INDEX__/plugins/fontawesome/css/all.min.css">

		<!-- calendar CSS -->
		<link rel="stylesheet" href="__INDEX__/plugins/simple-calendar/simple-calendar.css">

		<!-- Feathericon CSS -->
		<link rel="stylesheet" href="__INDEX__/css/feather.css">

		<!-- Main CSS -->
		<link rel="stylesheet" href="__INDEX__/css/style.css">
	</head>
	<body>
		<!-- Main Wrapper -->
		<div class="main-wrapper">
			<!-- Header -->
			<div class="header">
				<!-- Logo -->
				<div class="header-left">
					<a href="index.html" class="logo">
						<img src="__INDEX__/img/logo.png" alt="Logo">
					</a>
					<a href="index.html" class="logo logo-small">
						<img src="__INDEX__/img/logo-small.png" alt="Logo" width="30" height="30">
					</a>
				</div>
				<!-- /Logo -->
				<a href="javascript:void(0);" id="toggle_btn">	<i class="fas fa-bars"></i>
				</a>
				<div class="top-nav-search">
					<form>
						<input type="text" class="form-control" placeholder="Search here">
						<button class="btn" type="submit"><i class="fa fa-search"></i>
						</button>
					</form>
				</div>
				<!-- Mobile Menu Toggle -->
				<a class="mobile_btn" id="mobile_btn">	<i class="fas fa-bars"></i>
				</a>
				<!-- /Mobile Menu Toggle -->
				<!-- Header Right Menu -->
				<ul class="nav user-menu">
					<!-- Flag -->
					<li class="nav-item dropdown has-arrow flag-nav mr-2">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
							<img src="__INDEX__/img/flags/us-1.png" alt="" width="32" height="32" class="rounded-circle"> 
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="__INDEX__/img/flags/us.png" alt="" height="16"> English
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="__INDEX__/img/flags/fr.png" alt="" height="16"> French
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="__INDEX__/img/flags/es.png" alt="" height="16"> Spanish
							</a>
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="__INDEX__/img/flags/de.png" alt="" height="16"> German
							</a>
						</div>
					</li>
					<!-- /Flag --> 
					<!-- Notifications -->
					<li class="nav-item dropdown">
						<a href="#" class="nav-link notifications-item">
							<i class="feather-bell"></i> <span class="badge badge-pill">3</span>
						</a>
					</li>
					<!-- /Notifications -->
					<!-- Chat -->
					<li class="nav-item dropdown">
						<a href="chat.html" class="dropdown-toggle nav-link chat-header">
							<i class="feather-message-square"></i> <span class="badge badge-pill header-chat">6</span>
						</a>
					</li>
					<!-- /Chat -->
					<li class="nav-item dropdown has-arrow main-drop ml-md-3">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img"><img src="__INDEX__/img/avatar.jpg" alt="">
							<span class="status online"></span></span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html"><i class="feather-user"></i> My Profile</a> 
							<a class="dropdown-item" href="login.html"><i class="feather-power"></i> Logout</a>
						</div>
					</li>
				</ul>
				<!-- /Header Right Menu -->
			</div>
			<!-- /Header -->

			<!-- Sidebar -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title">	<span>Main</span>
							</li>
							<li><a href="index.html"><i class="feather-home"></i><span>Dashboard</span></a>
							</li>
							<li><a href="patients.html"><i class="feather-user"></i> <span>Patients</span></a>
							</li>
							<li><a href="appointments.html"><i class="feather-list"></i> <span>Appointments</span><span class="badge bg-success-text">2</span></a>
							</li>
							<li><a href="flow-board.html"><i class="feather-bar-chart"></i> <span>Flow Board</span></a>
							</li>
							<li><a href="recall-board.html"><i class="feather-calendar"></i> <span>Recall Board</span></a>
							</li>
							<li><a href="chat.html"><i class="feather-message-circle"></i> <span>Messages</span><span class="badge bg-orange-text">4</span></a>
							</li>
							<li class="submenu">
								<a href="#"><i class="feather-disc"></i> <span> Procedures</span> <span class="menu-arrow"></span></a>
								<ul style="display: none;">
									<li><a href="electronics-report.html">Electronics Reports</a></li>
									<li><a href="lab-documents.html">Lab Documents</a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="javascript:void(0);"><i class="feather-book"></i> <span>Reports</span> <span class="menu-arrow"></span></a>
								<ul style="display: none;">
									<li class="submenu">
										<a href="javascript:void(0);"> <span>Clients</span> <span class="menu-arrow"></span></a>
										<ul style="display: none;">
											<li><a href="client-list.html"><span>List</span></a></li>
											<li><a href="client-rx.html"> <span>RX</span></a></li>
											<li><a href="patient-list.html"> <span>Patient List Creation</span></a></li>
											<li><a href="clinical-report.html"> <span>Clinical</span></a></li>
											<li><a href="referals-report.html"> <span>Reference</span></a></li>
											<li><a href="immunization-registry.html"> <span>Immunization Registry</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"> <span>Clinics</span> <span class="menu-arrow"></span></a>
										<ul style="display: none;">
											<li><a href="report-results.html"><span>Report Results</span></a></li>
											<li><a href="standard-measures.html"> <span>Standard Measures</span></a></li>
											<li><a href="quality-measures.html"> <span>Quality Measures (CQM)</span></a></li>
											<li><a href="automated-measures.html"> <span>Automated Measures (AMC)</span></a></li>
											<li><a href="amc-tracking.html"> <span>AMC Tracking</span></a></li>
											<li><a href="alert-log.html"> <span>Alerts Log</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"> <span>Visits</span> <span class="menu-arrow"></span></a>
										<ul style="display: none;">
											<li><a href="appointments-visit.html"><span>Appointments</span></a></li>
											<li><a href="flow-board-record.html"> <span>Patient Flow Board</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"> <span>Procedure</span> <span class="menu-arrow"></span></a>
										<ul style="display: none;">
											<li><a href="pending-orders.html"><span>Pending Res</span></a></li>
										</ul>
									</li>
									<li class="submenu">
										<a href="javascript:void(0);"> <span>Insurance</span> <span class="menu-arrow"></span></a>
										<ul style="display: none;">
											<li><a href="unique-insurance.html"><span>Unique SP</span></a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="settings.html"><i class="feather-settings"></i> <span>Settings</span></a>
							</li>
							<li class="submenu">
								<a href="#"><i class="feather-grid"></i> <span> Application</span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="calendar.html">Calendar</a></li>
									<li><a href="inbox.html">Email</a></li>
								</ul>
							</li>
							<li class="menu-title"> 
								<span>Pages</span>
							</li>
							<li> 
								<a href="profile.html"><i class="feather-user-plus"></i> <span>Profile</span></a>
							</li>
							<li class="submenu">
								<a href="#"><i class="feather-lock"></i> <span> Authentication </span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="login.html"> Login </a></li>
									<li><a href="register.html"> Register </a></li>
									<li><a href="forgot-password.html"> Forgot Password </a></li>
									<li><a href="lock-screen.html"> Lock Screen </a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="#"><i class="feather-alert-octagon"></i> <span> Error Pages </span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="error-404.html">404 Error </a></li>
									<li><a href="error-500.html">500 Error </a></li>
								</ul>
							</li>
							<li> 
								<a href="users.html"><i class="feather-user"></i> <span>Users</span></a>
							</li>
							<li> 
								<a href="blank-page.html"><i class="feather-file"></i> <span>Blank Page</span></a>
							</li>
							<li> 
								<a href="maps-vector.html"><i class="feather-map-pin"></i> <span>Vector Maps</span></a>
							</li>
							<li class="menu-title"> 
								<span>UI Interface</span>
							</li>
							<li> 
								<a href="components.html"><i class="feather-layers"></i> <span>Components</span></a>
							</li>
							<li class="submenu active">
								<a href="#"><i class="feather-sidebar"></i><span class="shape1"></span><span class="shape2"></span> <span> Forms </span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="form-basic-inputs.html">Basic Inputs </a></li>
									<li><a href="form-input-groups.html">Input Groups </a></li>
									<li><a href="form-horizontal.html">Horizontal Form </a></li>
									<li><a href="form-vertical.html"> Vertical Form </a></li>
									<li><a href="form-mask.html" class="active"> Form Mask </a></li>
									<li><a href="form-validation.html"> Form Validation </a></li>
								</ul>
							</li>
							<li class="submenu">
								<a href="#"><i class="feather-layout"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
								<ul>
									<li><a href="tables-basic.html">Basic Tables </a></li>
									<li><a href="data-tables.html">Data Table </a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->
			
			<!-- Page Wrapper -->
            <div class="page-wrapper">
                <div class="content container-fluid">
				
					<!-- Page Header -->
					<div class="page-header">
						<div class="row align-items-center">
							<div class="col-md-12">
								<div class="d-flex align-items-center">
									<h5 class="page-title">Dashboard</h5>
									<ul class="breadcrumb ml-2">
										<li class="breadcrumb-item"><a href="index.html"><i class="fas fa-home"></i></a></li>
										<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
										<li class="breadcrumb-item active">Form Mask</li>
									</ul>
								</div>
							</div> 
						</div>
					</div> 
					<!-- /Page Header -->
					
					<div class="row">
						<div class="col-sm-12">
							<div class="card">
								<div class="card-header">
									<h5 class="card-title">Form Mask</h5>
									<p class="card-text">Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.</p>
								</div>
								<div class="card-body">
									<form action="#">
										<div class="form-group">
											<label>Phone</label>
											<input type="text" id="phone" class="form-control">
											<span class="form-text text-muted">(999) 999-9999</span>
										</div>
										<div class="form-group">
											<label>Date</label>
											<input type="text" id="date" class="form-control">
											<span class="form-text text-muted">dd/mm/yyyy</span>
										</div>
										<div class="form-group">
											<label>SSN field 1</label>
											<input type="text" id="ssn" class="form-control">
											<span class="form-text text-muted">e.g "999-99-9999"</span>
										</div>
										<div class="form-group">
											<label>Phone field + ext.</label>
											<input type="text" id="phoneExt" class="form-control">
											<span class="form-text text-muted">+40 999 999 999</span>
										</div>
										<div class="form-group">
											<label>Product Key</label>
											<input type="text" id="product" class="form-control">
											<span class="form-text text-muted">e.g a*-999-a999</span>
										</div>
										<div class="form-group">
											<label>Currency</label>
											<input type="text" id="currency" class="form-control">
											<span class="form-text text-muted">$ 999,999,999.99</span>
										</div>
										<div class="form-group">
											<label>Eye Script</label>
											<input type="text" id="eyescript" class="form-control">
											<span class="form-text text-muted">~9.99 ~9.99 999</span>
										</div>
										<div class="form-group">
											<label>Percent</label>
											<input type="text" id="pct" class="form-control">
											<span class="form-text text-muted">e.g "99%"</span>
										</div>
										<div class="form-group mb-0">
											<label>Credit Card Number</label>
											<input type="text" class="form-control" id="ccn">
											<span class="form-text text-muted">e.g "999.999.999.9999"</span>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				
				</div>			
			</div>
			<!-- /Page Wrapper -->

			<!-- Notification -->
			<div class="notifications">
				<div class="topnav-dropdown-header">
					<span class="notification-title">Notifications</span>
					<a href="javascript:void(0)" class="clear-noti"> <i class="feather-x-circle"></i> </a>
				</div>
				<div class="noti-content">
					<ul class="notification-list">
						<li class="notification-message">
							<a href="#">
								<div class="media">
									<span class="avatar">
									<img alt="" src="__INDEX__/img/profiles/avatar-02.jpg" class="rounded-circle">
									</span>
									<div class="media-body">
										<p class="noti-details"><span class="noti-title">John Doe</span> added new task <span class="noti-title">Patient appointment booking</span></p>
										<p class="noti-time"><span class="notification-time">4 mins ago</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="notification-message">
							<a href="#">
								<div class="media">
									<span class="avatar">
									<img alt="" src="__INDEX__/img/profiles/avatar-03.jpg" class="rounded-circle">
									</span>
									<div class="media-body">
										<p class="noti-details"><span class="noti-title">Tarah Shropshire</span> changed the task name <span class="noti-title">Appointment booking with payment gateway</span></p>
										<p class="noti-time"><span class="notification-time">6 mins ago</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="notification-message">
							<a href="#">
								<div class="media">
									<span class="avatar">
									<img alt="" src="__INDEX__/img/profiles/avatar-06.jpg" class="rounded-circle">
									</span>
									<div class="media-body">
										<p class="noti-details"><span class="noti-title">Misty Tison</span> added <span class="noti-title">Domenic Houston</span> and <span class="noti-title">Claire Mapes</span> to project <span class="noti-title">Doctor available module</span></p>
										<p class="noti-time"><span class="notification-time">8 mins ago</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="notification-message">
							<a href="#">
								<div class="media">
									<span class="avatar">
									<img alt="" src="__INDEX__/img/profiles/avatar-17.jpg" class="rounded-circle">
									</span>
									<div class="media-body">
										<p class="noti-details"><span class="noti-title">Rolland Webber</span> completed task <span class="noti-title">Patient and Doctor video conferencing</span></p>
										<p class="noti-time"><span class="notification-time">12 mins ago</span></p>
									</div>
								</div>
							</a>
						</li>
						<li class="notification-message">
							<a href="#">
								<div class="media">
									<span class="avatar">
									<img alt="" src="__INDEX__/img/profiles/avatar-13.jpg" class="rounded-circle">
									</span>
									<div class="media-body">
										<p class="noti-details"><span class="noti-title">Bernardo Galaviz</span> added new task <span class="noti-title">Private chat module</span></p>
										<p class="noti-time"><span class="notification-time">2 days ago</span></p>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="topnav-dropdown-footer">
					<a href="javascript:void(0);">View all Notifications</a>
				</div>
			</div>
			<!-- /Notification -->		
        </div>
		<!-- /Main Wrapper -->
		
		<!-- jQuery -->
		<script src="__INDEX__/js/jquery-3.6.0.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="__INDEX__/js/bootstrap.bundle.min.js"></script>
		
		<!-- Slimscroll JS -->
		<script src="__INDEX__/plugins/slimscroll/jquery.slimscroll.min.js"></script>
		
		<!-- Mask JS -->
		<script src="__INDEX__/js/jquery.maskedinput.min.js"></script>
        <script src="__INDEX__/js/mask.js"></script>
		
		<!-- Custom JS -->
		<script src="__INDEX__/js/script.js"></script>

	</body>
</html>
